<template>
  <div class="home-often-menu">
    <div class="title-text" :style="{ background: 'url(' + url + ') no-repeat center' }">
      <span class="title-name">快捷功能</span>
    </div>
    <div class="title-btn-box">
      <ui-button class="item-btn" :span="6" v-for="(item, index) in menuList" :key="index">
        <img class="item-img" :src="require(`@/assets/image/theme/${activeName}/transfer.png`)" alt="" />
        <span class="item-title">{{ item.title | getTitleBylength }}</span>
      </ui-button>
      <ui-button @click="openAll" class="item-btn">
        <span class="item">
          <img class="item-img" :src="require(`@/assets/image/theme/${activeName}/add.png`)" alt="" />
        </span>
      </ui-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      // menuLists: [],
      title: '',
      visableFlag: false,
      dialogState: false,
      url: '',
    };
  },
  computed: {
    ...mapState('vxadmin/businessHome', ['menuList']),
    // 计算修改快捷功能按钮的偏移量，根据已设置快捷菜单数量
    offsetNum() {
      return this.menuList.length == 0 ? 7 * 3 : (6 - this.menuList.length) * 3;
    },
    ...mapState('vxadmin/theme', ['activeName']),
  },
  created() {
    this.url = require(`@/assets/image/theme/${this.activeName}/quickFun.png`);
    // this.menuLists = this.menuList;
  },
  watch: {
    // 监听主题变化，赋值新的背景图片
    activeName(newVal) {
      this.url = require(`@/assets/image/theme/${newVal}/quickFun.png`);
    },
  },
  mounted() {},
  // watch: {
  // // 检测快捷菜单变化
  // 'menuList': {
  //     handler(newVal) {
  //     },
  //   }
  // },
  filters: {
    // 菜单名称显示时，最多十个字符，超过的直接截断
    getTitleBylength: function(value) {
      if (value.length > 10) {
        return value.substring(0, 10) + '...';
      } else {
        return value;
      }
    },
  },
  methods: {
    /**
     * openAll
     * 打开快捷菜单设置弹框
     */
    openAll() {
      this.visableFlag = true;
    },
    handleClose() {
      this.dialogState = true;
      this.visableFlag = false;
    },
    dialogVisable() {
      this.visableFlag = false;
    },
    editDialogState(payload) {
      this.dialogState = payload;
    },
  },
};
</script>

<style lang="scss">
.home-often-menu {
  background: $color-bg-default;
  position: relative;
  height: 80px;
  border-radius: 8px;
  box-shadow: 0px 1px 10px 0px rgba(0, 21, 41, 0.07);
  .title-text {
    width: 90px;
    height: 90px;
    margin-top: -5px;
    border-radius: 8px;
    min-width: 90px;
    .title-name {
      height: 40px;
      width: 40px;
      display: block;
      margin: 27% auto;
      font-size: $s16;
      color: $color-text-primary;
      letter-spacing: 3px;
    }
  }
  .vx-theme {
    background: url(~@/assets/image/theme/vx/quickFun.png) no-repeat center;
  }
  .red-theme {
    background: url(~@/assets/image/theme/red/quickFun.png) no-repeat center;
  }
  .title-btn-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
  }
  .item-btn {
    display: block;
    white-space: normal;
    border: none;
    padding: 12px;
    & > span {
      display: flex;
      align-items: center;
      width: 100%;
      .item-img {
        width: 32px;
        height: auto;
        margin: 0 auto;
      }
      .item-title {
        display: block;
        max-width: calc(100% - 42px);
        text-align: left;
        margin-left: 10px;
        min-width: 4em;
      }
    }
  }
  .item-btn + .item-btn {
    margin-left: 8px;
  }
}
</style>
